<template>
  <div v-if="openKeepAlivePages.length">
    <template v-for="item in openKeepAlivePages" :key="item.name">
      <div v-show="routName === item.name">
      </div>
    </template>
  </div>
</template>
<script lang="ts">
  import { defineComponent, computed } from 'vue';
  import { useRouter } from 'vue-router';
  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
  
  export default defineComponent({
    name: 'FrameLayout',
    components: {},
    setup() {
      const tabStore = useMultipleTabStore();

      const routName = computed(() => {
        const { currentRoute } = useRouter();
        const { name } = currentRoute.value
        return name
      });

      // 筛选出当前打开的tab（meta配置了frameSrc的iframe页面）需要缓存的路由
      const openKeepAlivePages = computed(() => {
        const list = tabStore?.getTabList || []
        return list.filter(item => item.meta.frameSrc) || []
      })

      return { 
        routName, 
        openKeepAlivePages, 
      };
    },
  });
</script>
